
<template>
    <div class="batch_content">
        <div class="content-right" id="addbat" v-cloak style="margin:0 auto;border:0;width:980px;background: #fff;text-align:left;">
            <div class="con-tp">
                <span class="stp_1" :class="{'yes':step==1}">基础设置</span>
                <span class="stp_2" :class="{'yes':step==2}">高级设置</span>
            </div>
            <div class="con-list1" v-show="step==1">
                <div class="title">基础设置</div>
                <div class="stepitem">
                    <div class="item_l with">
                        <label>归属任务</label>
                        <input type="text" name="taskinfoname" :value="info.public.taskName" readonly />
                        <!-- 任务列表 -->
                        <transition name="fade">
                            <div class="givefile" v-if="taskLayer" style="z-index:9999;">
                                <em @click="close">关闭</em>
                                <div class="clearfix mn-con">
                                    <div class="mn-con-rt">
                                        <div class="label clearfix">
                                            <input type="text" v-model="searchTaskName" placeholder="请输入任务名称" />
                                            <a v-on:click="searchTask">确认</a>
                                        </div>
                                        <div class="bom-sel">
                                            <ul>
                                                <li v-for="item in taskList" :class="{'select':info.public.taskId==item.taskid}" v-on:click="selectTask(item.taskid,item.name,item.task_team_id)" :title="item.name" :key="item.taskid">{{item.name}}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </transition>
                    </div>
                    <div class="item_r">
                        <label>批次名称</label>
                        <input type="text" ref="inputTask" v-on:focus="monitor($event)" name="batchname" v-model="info.public.batchName" placeholder="请输入批次名称" :disabled="info.public.edit" />
                    </div>
                </div>

                <div class="stepitem">
                    <label>标注规范</label>
                    <quill-editor v-model="info.public.rule" :style="{height:'100px'}" ref="myQuillEditor" :options="editorOption" @focus="monitor($event)" @change="EditChange($event)">
                    </quill-editor>
                    <!-- <textarea class="area" 
          id="editor" name="batchrule" v-on:focus="monitor($event)" placeholder="请输入规范" 
          v-model="info.public.rule" style="display: inline-block;width:760px;height: 120px;"></textarea> -->
                </div>
                <div class="radioitem" style="margin-top:75px">
                    <label>批次优先级</label>
                    <ul class="radio">
                        <li @click="levelChange(3)" :class="{'selected':info.public.level==3}">低</li>
                        <li @click="levelChange(2)" :class="{'selected':info.public.level==2}">中</li>
                        <li @click="levelChange(1)" :class="{'selected':info.public.level==1}">高</li>
                        <li @click="levelChange(0)" :class="{'selected':info.public.level==0}">绝对优先</li>
                    </ul>
                </div>
                <div class="radioitem">
                    <label>批次状态</label>
                    <ul class="radio">
                        <li @click="executeChange(0)" :class="{'selected':info.public.paused==0}">立即执行</li>
                        <li @click="executeChange(1)" :class="{'selected':info.public.paused==1}">暂不执行</li>
                    </ul>
                </div>
                <div v-if="flag">
                    <div id="baseSetting">
                        <basesetting-component ref="base" :editBaseData="editBaseData"></basesetting-component>
                    </div>
                </div>
                <div class="btngroup">
                    <a v-on:click="nextstep">下一步</a>
                </div>
            </div>
            <!--con-list01-->
            <div class="con-list2" v-show="step==2">
                <div v-if="flag">
                    <div id="specSetting">
                        <specsetting-component ref="spec" :editSpecData="editSpecData"></specsetting-component>
                    </div>
                </div>
                <div class="btngroup">
                    <a v-on:click="nextstep">上一步</a>
                    <a class="btnd" v-on:click="submitBtn(0)">提交</a>
                    <a class="btnd" v-on:click="submitBtn(1)" v-if="statusType != 4 && statusType != 5 && statusType != 6" v-show="flowtask == null || flowtask == undefined">保存</a>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import $ from "jquery";
import "@/assets/js/plugin/ueditor/ueditor.config.js";
import "@/assets/js/plugin/ueditor/ueditor.all.js";
import "@/assets/js/plugin/ueditor/lang/zh-cn/zh-cn";
import "@/assets/js/plugin/ueditor/ueditor.parse.js";
import BaseSetting from "@/components/create-batch/BaseSetting";
import SpecSetting from "@/components/create-batch/SpecSetting";
export default {
    name: "CreateBatch",
    data() {
        return {
            // ue: null, 老富文本框
            editBaseData: null,
            editSpecData: null,
            repulse: "",
            jurisdiction: "",
            task_team_id: "",
            role: "",
            groupId: "",
            flowtask: "",
            batchId: "",
            edit: "",
            statusType: "",
            postData: {
                status: "4;5;6", //查询状态
                batchName: "", //批次名称
                taskName: "", //任务名称
                queryType: "page", //分页标识
                delFlag: ""
            },
            pageSize: 1,
            batchList: null,
            searchTaskName: "", //搜索任务列表
            taskLayer: false, //任务列表弹层
            taskList: [], //任务列表盒子
            step: 1, //基础、高级
            priority: 2, //记住当前批次的优先级
            flag: false,
            info: {
                public: {
                    pickBatchId: "",
                    pickTaskId: "",
                    batchId: "", //
                    edit: false,
                    taskName: "", //归属任务名称
                    taskId: "", //归属任务id
                    batchName: "",
                    rule: "",
                    level: 2,
                    paused: 0
                },
                custom: {
                    base: {},
                    spec: {}
                }
            },
            // 富文本编辑框配置项
            editorOption: {
                placeholder: "请输入规范",
                modules: {
                    toolbar: [
                        ["bold", "italic", "underline", "image"] // toggled buttons
                    ]
                }
            }
        };
    },
    created() {},
    components: {
        "basesetting-component": BaseSetting,
        "specsetting-component": SpecSetting
    },
    methods: {
        nextstep: function() {
            var self = this;
            let htmlVal = self.info.public.rule; //获取富文本编辑框的HTML
            let reg = /<[^<>]+>/g;
            let htmlValtext = htmlVal.replace(/<!--[\w\W\r\n]*?-->/gim, ""); //获取富文本编辑框的text
            htmlValtext = htmlValtext.replace(reg, "");
            htmlValtext = htmlValtext
                .replace(/&nbsp;/g, "")
                .replace("/\n/g", "");
            self.info.public.rule = htmlVal;
            let reg2 = /^[A-Za-z0-9\-\u4e00-\u9fa5]+$/;
            if (self.info.public.taskName == "") {
                if (!$("input[name='taskinfoname']").hasClass("err")) {
                    $("input[name='taskinfoname']")
                        .removeClass("yes")
                        .addClass("err")
                        .after("<div class='error'>请先选择归属任务</div>");
                }
                return false;
            } else if (self.info.public.batchName == "") {
                if (!$("input[name='batchname']").hasClass("err")) {
                    $("input[name='batchname']")
                        .removeClass("yes")
                        .addClass("err")
                        .after("<div class='error'>请输入批次名称</div>");
                }
                return false;
            } else if (self.info.public.batchName.length > 40) {
                if (!$("input[name='batchname']").hasClass("err")) {
                    $("input[name='batchname']")
                        .removeClass("yes")
                        .addClass("err")
                        .after(
                            "<div class='error'>批次名称不能超过40个字符</div>"
                        );
                }
                return false;
            } else if (!reg2.test(self.info.public.batchName)) {
                if (!$("input[name='batchname']").hasClass("err")) {
                    $("input[name='batchname']")
                        .removeClass("yes")
                        .addClass("err")
                        .after(
                            "<div class='error'>批次名称支持中英文数字和-</div>"
                        );
                }
                return false;
            } else if (
                htmlValtext == 0 ||
                htmlValtext.length > 3000 ||
                htmlValtext.length < 1
            ) {
                if (!$(".ql-container").hasClass("err")) {
                    $(".ql-container")
                        .removeClass("yes")
                        .addClass("err")
                        .after(
                            "<div class='error' style='margin-left:0;'>标注规范需在1~3000字符</div>"
                        );
                    console.log(this.$refs["myQuillEditor"]);
                }
                return false;
            } else {
                if (self.step == 1) {
                    self.step = 2;
                } else {
                    self.step = 1;
                }
            }
        },
        executeChange(n) {
            var self = this;
            if (self.info.public.taskId != "") {
                self.info.public.paused = n;
            } else {
                self.$message("请先选择归属任务");
            }
        },
        levelChange: function(n) {
            var self = this;
            if (self.info.public.taskId != "") {
                if (self.priority == n) {
                    self.info.public.level = n;
                } else {
                    self.ass_api
                        .batchPriority({
                            taskId: self.info.public.taskId,
                            priority: n,
                            batchId: self.info.public.batchId
                        })
                        .then(data => {
                            if (!data) return;
                            self.info.public.level = n;
                        });
                }
            } else {
                self.ui.fade("请先选择归属任务");
            }
        },
        taskLayerShow: function() {
            var self = this;
            if ($("input[name='taskinfoname']").hasClass("err")) {
                $("input[name='taskinfoname']")
                    .removeClass("err")
                    .addClass("yes");
                $("input[name='taskinfoname']")
                    .next(".error")
                    .remove();
            }
            this.getTaskList();
            self.taskLayer = true;
        },
        monitor: function(e) {
            let ev = e.currentTarget;
            if ($(ev).hasClass("err")) {
                $(ev)
                    .removeClass("err")
                    .addClass("yes");
            }
            $(ev)
                .next(".error")
                .remove();
        },
        EditChange($event) {
            console.log(this.info.public.rule);
        },
        getTaskList: function(type) {
            var self = this;
            self.flag = false;
            let params = {
                qtype: "adminTask"
            };
            if (type != "" && type != null && type != undefined) {
                params.name = type;
            }

            self.ass_api.batchAttributionTask(params).then(data => {
                if (!data) return;
                self.taskList = data;
            });
        },
        searchTask: function() {
            this.getTaskList(this.searchTaskName);
        },
        selectTask: function(id, name, teamid) {
            var self = this;
            self.info.public.taskId = id;
            self.info.public.taskName = name;
            self.taskLayer = false;
            if (!self.info.public.edit) {
                if (!teamid) {
                    //流转任务不带入批次信息
                    if (this.flowtask) {
                        console.log("这里调用的是批次组件");
                    } else {
                        this.getTaskBatch(id, name, teamid);
                    }
                } else {
                    this.getTaskBatch(id, name, teamid);
                }
            }
            self.flag = true;
        },
        getTaskBatch(id, name, teamid) {
            // console.log(this.groupId)
            var self = this;
            var mydata = {};
            mydata.status = self.postData.status;
            mydata.batchName = self.postData.batchName;
            mydata.queryType = self.postData.queryType;
            mydata.dealType = "default";
            self.ass_api
                .batchInfo({
                    taskId: id,
                    currPage: 1, // 分页参数
                    pageSize: self.pageSize, // 分页参数
                    ...mydata
                })
                .then(data => {
                    if (!data) return;
                    self.batchList = data.list;
                    if (JSON.stringify(data.list) != "[]") {
                        self.getBatchInfo(self.batchList[0].batchId, teamid);
                    } else {
                        if (teamid) {
                            // 为空不赋值
                            self.groupId = teamid;
                            self.info.public.batchName = "";
                            self.info.public.level = 2;
                            self.info.public.paused = 0;
                            if (self.info.public.rule) {
                                // self.ue.setContent((self.info.public.rule = ""));
                                self.info.public.rule = "";
                            }
                        } else {
                            self.groupId = self.GetQueryString("groupId");
                            self.info.public.batchName = "";
                            self.info.public.level = 2;
                            self.info.public.paused = 0;
                            if (self.info.public.rule) {
                                // self.ue.setContent((self.info.public.rule = ""));
                                self.info.public.rule = "";
                            }
                        }
                    }
                    self.role = teamid;
                });
        },
        getBatchInfo(id, teamid) {
            var self = this;
            if (id != "") {
                self.ass_api
                    .batchInfo({
                        batchId: id
                    })
                    .then(data => {
                        if (!data) return;
                        let _data = data[0];
                        self.info.public.edit = false;
                        // self.info.public.batchId = _data.batchId;
                        self.info.public.taskName = _data.taskName;
                        self.info.public.taskId = _data.taskId;
                        self.info.public.batchName = _data.batchName;
                        self.info.public.rule = _data.markStandard;
                        self.info.public.level = _data.priority;
                        if (_data.paused == null || _data.paused == undefined) {
                            self.info.public.paused = 0;
                        } else {
                            self.info.public.paused = _data.paused;
                        }
                        self.priority = _data.priority;
                        _data.extend.custom.base.myrid = "";
                        if (_data.extend.custom.base.recycleTime) {
                            delete _data.extend.custom.base.recycleTime;
                        }
                        self.$set(
                            this,
                            "editBaseData",
                            _data.extend.custom.base
                        );
                        self.$set(
                            this,
                            "editSpecData",
                            _data.extend.custom.spec
                        );

                        // if (self.info.public.rule) {
                        //     self.ue.setContent(self.info.public.rule);
                        // }
                        if (teamid) {
                            self.groupId = teamid;
                            self.jurisdiction = teamid;
                            self.info.public.batchName = "";
                        } else {
                            self.groupId = self.GetQueryString("groupId");
                            self.jurisdiction = self.groupId;
                            self.info.public.batchName = "";
                        }
                        self.flag = true;
                    });
            }
        },
        close: function() {
            var self = this;
            self.taskLayer = false;
            if (self.info.public.taskId != "") {
                self.selectTask(
                    self.info.public.taskId,
                    self.info.public.taskName
                );
            }
        },
        GetQueryString: function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        },
        submitBtn: function(n) {
            var self = this;
            //删除目录树
            this.$refs.base.fileList = [];
            if (this.$refs.spec.textareaStatus == 2) {
                this.$refs.spec.textareaStatus = 1;
            }
            self.info.custom.base = this.$refs.base.$data;
            self.info.custom.spec = this.$refs.spec.$data;

            if (
                (this.statusType == null || this.statusType == undefined) &&
                this.batchId == null
            ) {
                self.info.public.batchId = "";
            }
            self.info.public["type"] = n;
            if (self.myvalidate() == 0) {
                self.ass_api
                    .createBatch(
                        this.info,
                        `?taskId=${self.info.public.taskId}&groupId=${
                            this.groupId
                        }`
                    )
                    .then(data => {
                        if (!data) return;
                        if (n == 0) {
                            self.ui.successGoBase(
                                "提交成功",
                                "/manager/index/batch"
                            );
                        } else {
                            self.ui.successGoBase(
                                "保存成功",
                                "/manager/index/batch"
                            );
                        }
                    });
            }
        },
        //校验的规则
        myvalidate: function() {
            var i = 0;
            let baseData = this.$refs.base.$data,
                specData = this.$refs.spec.$data,
                reg = /^[0-9]*[1-9][0-9]*$/, //正整数
                regdec = /^([1-9]\d*|0)(\.\d{1,3})?$/; //3位小数验证
            if (
                baseData.layerstatus1 == false &&
                baseData.layerstatus2 == false &&
                baseData.layerstatus3 == false
            ) {
                this, ui.fade("请选择基础设置中的文本层配置");
                i += 1;
                return i;
            } else if (
                baseData.layerstatus3 == true &&
                baseData.tagListArr == ""
            ) {
                this.ui.fade("标签设置不能为空");
                i += 1;
                return i;
            } else if (
                baseData.layerstatus4 == true &&
                baseData.propertyListArr == ""
            ) {
                this.ui.fade("属性设置不能为空");
                i += 1;
                return i;
            } else if (
                specData.checkStatus == true &&
                !reg.test(Number(specData.checkVal))
            ) {
                this.ui.fade("检查比例必须是小于等于100的正整数");
                i += 1;
                return i;
            } else if (
                specData.checkStatus == true &&
                Number(specData.checkVal) > 100
            ) {
                this.ui.fade("检查比例必须是小于等于100的正整数");
                i += 1;
                return i;
            } else if (
                specData.testStatus == true &&
                !reg.test(Number(specData.testVal))
            ) {
                this.ui.fade("质检比例必须是小于等于100的正整数");
                i += 1;
                return i;
            } else if (
                specData.testStatus == true &&
                Number(specData.testVal) > 100
            ) {
                this.ui.fade("质检比例必须是小于等于100的正整数");
                i += 1;
                return i;
            } else if (
                specData.exchangeStatus == true &&
                !reg.test(Number(specData.exchangeVal))
            ) {
                this.ui.fade("积分换算比例必须小于等于5000的正整数");
                i += 1;
                return i;
            } else if (
                specData.exchangeStatus == true &&
                Number(specData.exchangeVal) > 5000
            ) {
                this.ui.fade("积分换算比例必须小于等于5000的正整数");
                i += 1;
                return i;
            } else if (baseData.importType == 3) {
                this.ui.fade("请选择数据导入方式");
                i += 1;
                return i;
            } else if (baseData.importType == 0 && baseData.myrid == "") {
                this.ui.fade("请导入云盘数据");
                i += 1;
                return i;
            } else if (
                specData.score.mark.coe == "" &&
                specData.score.mark.coe != 0
            ) {
                this.ui.fade("请输入标注积分设置");
                i += 1;
                return i;
            } else if (specData.score.mark.coe < 0) {
                this.ui.fade("标注积分不能小于0");
                i += 1;
                return i;
            } else if (!regdec.test(specData.score.mark.coe)) {
                this.ui.fade("标注积分为最多3位小数的数字");
                console.log("标注积分 :" + specData.score.mark.coe);
                i += 1;
                return i;
            } else if (
                specData.checkStatus &&
                specData.score.check.coe == "" &&
                specData.score.check.coe != 0
            ) {
                this.ui.fade("请输入检查积分设置");
                i += 1;
                return i;
            } else if (specData.checkStatus && specData.score.check.coe < 0) {
                this.ui.fade("检查积分不能小于0");
                i += 1;
                return i;
            } else if (
                specData.checkStatus &&
                !regdec.test(specData.score.check.coe)
            ) {
                this.ui.fade("检查积分为最多3位小数的数字");
                i += 1;
                return i;
            } else if (
                specData.textareaStatus == 1 &&
                specData.textareaValue == ""
            ) {
                this.ui.fade("请输入超限原因");
                i += 1;
                return i;
            } else if (
                Number(specData.score.mark.ARR) * 1000 +
                    Number(specData.score.mark.ATR) * 1000 +
                    Number(specData.score.mark.ALR) * 1000 !=
                1000
            ) {
                this.ui.fade("标注正确率必须为1");
                i += 1;
                return i;
            } else if (
                specData.exchangeproperty &&
                !!!baseData.propertyListArr.length
            ) {
                // 通用OCR 选择必选标注属性 同时 属性数组为空
                this.ui.fade("必选标注属性，请设置属性");
                i += 1;
            } else if (
                specData.checkStatus == false &&
                specData.score.mark.not_simple == true &&
                (specData.score.mark.IRR == "" ||
                    specData.score.mark.IAR == "" ||
                    specData.score.mark.ILR == "" ||
                    specData.score.mark.IAPR == "" ||
                    specData.score.mark.INAPR == "")
            ) {
                this.ui.fade("画框个数不能为空！");
                i += 1;
                return i;
            } else if (
                specData.checkStatus == true &&
                specData.score.mark.not_simple == true &&
                (specData.score.mark.IRR == "" ||
                    specData.score.mark.IAR == "" ||
                    specData.score.mark.ILR == "" ||
                    specData.score.mark.IAPR == "" ||
                    specData.score.mark.INAPR == "" ||
                    specData.score.check.IRR == "" ||
                    specData.score.check.IAR == "" ||
                    specData.score.check.ILR == "" ||
                    specData.score.check.IAPR == "" ||
                    specData.score.check.INAPR == "")
            ) {
                this.ui.fade("画框个数不能为空！");
                i += 1;
                return i;
            }
            return i;
        }
    },
    mounted: function() {
        var self = this;
        // this.ue = window.UE.getEditor("editor", {
        //     autoHeightEnabled: false, //设置不自动调整高度
        //     elementPathEnabled: false,
        //     wordCount: false
        // });
        //判断是否是流转任务,如果是，需要传上一个任务的batchid和taskid
        this.info.public.pickBatchId = this.GetQueryString("batchId");
        this.info.public.pickTaskId = this.GetQueryString("pickTaskId");
        this.info.public.taskId = this.GetQueryString("taskId");
        this.statusType = this.GetQueryString("status");
        this.batchId = this.GetQueryString("batchId");
        this.flowtask = this.GetQueryString("flowtask");
        this.groupId = this.GetQueryString("groupId");
        this.repulse = this.GetQueryString("repulse");

        this.Utils.getValue("batchId", function(id) {
            if (id != "") {
                id = id.substring(0, id.indexOf("&"));

                self.ass_api
                    .batchInfo({
                        batchId: id
                    })
                    .then(data => {
                        if (!data) return;
                        let _data = data[0];
                        self.info.public.edit = true;
                        self.info.public.batchId = _data.batchId;
                        self.batchId = _data.batchId;
                        self.info.public.taskName = _data.taskName;
                        self.info.public.taskId = _data.taskId;
                        self.info.public.batchName = _data.batchName;
                        self.info.public.rule = _data.markStandard;
                        self.info.public.level = _data.priority;
                        if (_data.paused == null || _data.paused == undefined) {
                            self.info.public.paused = 0;
                        } else {
                            self.info.public.paused = _data.paused;
                        }
                        self.priority = _data.priority;
                        if (_data.extend.custom.base.recycleTime) {
                            delete _data.extend.custom.base.recycleTime;
                        }
                        self.$set(
                            self,
                            "editBaseData",
                            _data.extend.custom.base
                        );
                        self.$set(
                            self,
                            "editSpecData",
                            _data.extend.custom.spec
                        );

                        self.flag = true;
                    });
            }
        });
        if (self.info.public.taskId != null) {
            self.ass_api
                .BatchTaskNameS({
                    taskid: self.info.public.taskId
                })
                .then(data => {
                    if (!data) return;
                    self.selectTask(self.info.public.taskId, data.name);
                });
        }

        // this.ue.addListener("ready", function() {
        //     if (self.info.public.rule) {
        //         self.ue.setContent(self.info.public.rule);
        //     }
        // });
    }
};
</script>
<style lang="less" scoped>
// @import "~@/assets/css/common/create-batch.css";
.content-right {
    width: 1000px;
    border-left: 20px solid #f2f3f4;
    margin-left: 200px;
    padding: 20px;
    min-height: 800px;
    .title {
        color: #5e6a68;
        font-size: 16px;
        font-weight: 700;
        line-height: 48px;
        display: block;
        position: relative;
        padding-left: 14px;
        margin-top: 10px;
    }
    .title:before {
        position: absolute;
        left: 0;
        top: 17px;
        width: 4px;
        height: 15px;
        display: block;
        background: #07d569;
        content: "";
    }
    .title p {
        padding: 5px 23px;
        display: inline;
        font-size: 12px;
        font-weight: normal;
        color: #e07900;
    }
    .btngroup {
        text-align: center;
        font-size: 0;
        padding-top: 80px;
    }
    .btngroup a {
        display: inline-block;
        font-size: 14px;
        width: 120px;
        margin-right: 10px;
        color: #fff;
        border: 1px solid #fcad1d;
    }
    .btngroup a:hover {
        border: 1px solid #e07900;
        background: #e07900;
    }
    .btngroup a.last {
        height: 34px;
        text-align: center;
        line-height: 34px;
        color: #333;
        color: #333;
        border: 1px solid #ececec;
        background: #fff;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        font-size: 14px;
        cursor: pointer;
    }
    .btngroup a.last:hover {
        background: #f9f9f9;
    }
}
.con-tp {
    height: 34px;
    width: 760px;
    margin: 0 0 0 100px;
    font-size: 0;
    span {
        width: 380px;
        height: 34px;
        display: inline-block;
        font-size: 14px;
        text-align: center;
        color: #14cd6b;
        line-height: 34px;
        background: url("~@/assets/images/common/work-team/addbat.png")
            no-repeat 0 0;
    }
    span.stp_1 {
        color: #78d3a2;
        background-position: 0 -34px;
    }
    span.stp_1.yes {
        color: #78d3a2;
        background-position: 0 0;
    }
    span.stp_2 {
        color: #78d3a2;
        background-position: -390px 0;
    }
    span.stp_2.yes {
        color: #78d3a2;
        background-position: -390px -34px;
    }
}
.stepitem {
    position: relative;
    margin-bottom: 15px;
    width: 860px;
    &:after {
        content: "";
        display: block;
        clear: both;
        height: 0;
    }
    label {
        width: 100px;
        padding-right: 10px;
        text-align: right;
        float: left;
        line-height: 34px;
        color: #666;
    }
    .item_l {
        display: inline-block;
        font-size: 14px;
        position: relative;
        width: 416px;
        float: left;
    }
    .with {
        position: relative;
    }
    textarea.area {
        font-size: 14px;
        border: 1px solid #e0e0e0;
        resize: none;
        border-radius: 2px;
        width: 760px;
        padding: 10px;
        height: 80px;
    }
    textarea.area.err {
        animation: errborder 1s;
        -moz-animation: errborder 1s;
        -webkit-animation: errborder 1s;
        -o-animation: errborder 1s;
        border-color: #fbae22;
        color: #fbae22;
    }
    textarea.area.yes {
        animation: myborder 1s;
        -moz-animation: myborder 1s;
        -webkit-animation: myborder 1s;
        -o-animation: myborder 1s;
        border-color: #e0e0e0;
        color: #333;
    }
    .item_l i {
        display: block;
        width: 50px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        font-style: normal;
        font-size: 14px;
        color: #fff;
        background: #14cb6b;
        position: absolute;
        right: 0;
        top: 0;
        -webkit-border-radius: 0 2px 2px 0;
        -moz-border-radius: 0 2px 2px 0;
        -ms-border-radius: 0 2px 2px 0;
        -o-border-radius: 0 2px 2px 0;
        border-radius: 0 2px 2px 0;
        cursor: pointer;
    }
    input.yes {
        animation: myborder 1s;
        -moz-animation: myborder 1s;
        -webkit-animation: myborder 1s;
        -o-animation: myborder 1s;
        border-color: #e0e0e0;
        color: #333;
    }
    .item_r input {
        width: 322px;
    }
    .item_r {
        display: inline-block;
        width: 422px;
        float: right;
    }
    input {
        width: 267px;
        border: 1px solid #e0e0e0;
        padding: 0 10px;
        line-height: 32px;
        display: inline-block;
        font-size: 14px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        height: 34px;
    }
    input.err {
        animation: errborder 1s;
        -moz-animation: errborder 1s;
        -webkit-animation: errborder 1s;
        -o-animation: errborder 1s;
        border-color: #fbae22;
        color: #fbae22;
    }
}
.givefile {
    position: absolute;
    top: 38px;
    left: 100px;
    background: #fff;
    width: 266px;
    z-index: 99;
    -webkit-border-radius: 0 2px 2px 0;
    -moz-border-radius: 0 2px 2px 0;
    -ms-border-radius: 0 2px 2px 0;
    -o-border-radius: 0 2px 2px 0;
    border-radius: 0 2px 2px 0;
    -webkit-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
    -moz-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
    -ms-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
    -o-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
    box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
    p.size {
        text-align: center;
        margin: 20px 0 10px 0;
        height: 14px;
        line-height: 14px;
        color: #999;
    }
    .mn-con {
        margin: 13px;
    }
    .mn-con .mn-con-rt .label {
        position: relative;
        width: 100%;
        padding: 0;
    }
    .mn-con .mn-con-rt .label input {
        width: 191px;
        border: 1px solid #ececec;
        height: 32px;
        line-height: 32px;
        padding-left: 10px;
        float: left;
        border-radius: 2px;
    }
    .mn-con .mn-con-rt .label a {
        width: 50px;
        height: 32px;
        line-height: 32px;
        background: #14cb6b;
        float: left;
        color: #fff;
        position: relative;
        margin-left: -1px;
        text-align: center;
    }
    .mn-con .mn-con-rt .label a i {
        background: url("~@/assets/images/common/lot-manage/person.png")
            no-repeat 0 0;
        height: 14px;
        width: 14px;
        display: inline-block;
        position: absolute;
        top: 11px;
        left: 10px;
    }
    .mn-con-lf {
        float: left;
        padding-top: 5px;
    }
    em {
        width: 15px;
        height: 15px;
        cursor: pointer;
        display: block;
        background: #e07900 url("~@/assets/images/common/close2.png") no-repeat
            0 0;
        text-indent: -99em;
        overflow: hidden;
        position: absolute;
        right: -15px;
        top: 0;
        color: #666;
        transition: all 0.3s ease-in;
        -moz-transition: all 0.3s ease-in;
        -webkit-transition: all 0.3s ease-in;
        -ms-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
    }
    em:hover {
        background: #d95d5d url("~@/assets/images/common/close2.png") no-repeat
            0 0;
        color: #fff;
        transition: all 0.3s ease-in;
        -moz-transition: all 0.3s ease-in;
        -webkit-transition: all 0.3s ease-in;
        -ms-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
    }
    .bom-sel {
        border: 1px solid #ececec;
        height: 240px;
        margin-top: 10px;
    }
    .ip-nm {
        padding: 10px 10px 0 10px;
        position: relative;
    }
    .ip-nm input {
        border: 1px solid #ececec;
        border-radius: 2px;
        height: 35px;
        line-height: 35px;
        padding-left: 10px;
        width: 100%;
    }
    .ip-nm a {
        position: absolute;
        background: url("~@/assets/images/common/lot-manage/gray_del.png")
            no-repeat 0 0;
        height: 14px;
        width: 14px;
        right: 20px;
        top: 20px;
    }
    .btn-list {
        margin: 30px auto;
        width: 190px;
        overflow: hidden;
    }
    .bom-sel ul {
        height: 238px;
        overflow-y: auto;
    }
    .bom-sel ul li {
        padding-left: 20px;
        height: 40px;
        line-height: 40px;
        text-align: left;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bom-sel ul li:not(:last-child) {
        border-bottom: 1px solid #ececec;
    }
    .bom-sel ul li.select {
        background: #f3f3f3;
        color: #14cb6b;
    }
}
.radioitem {
    height: 34px;
    line-height: 14px;
    margin: 15px 0 15px 0;
    .radio {
        height: 14px;
        line-height: 14px;
        float: left;
        margin-top: 10px;
        width: auto;
        margin-left: 0;
        li {
            margin-right: 40px;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            padding-left: 22px;
            display: inline-block;
            background: url("~@/assets/images/common/radio.png") no-repeat -119px
                0;
            float: left;
            width: auto;
        }
        li.selected {
            background-position: 0 0;
        }
        li.selected[type="cursor"] {
            cursor: default;
        }
    }
    label {
        width: 100px;
        padding-right: 10px;
        text-align: right;
        float: left;
        line-height: 34px;
        color: #666;
    }
}
.quill-editor {
    width: 760px;
    float: left;
}
.quill-editor .ql-container.ql-snow {
    height: 100px !important;
}
</style>
